<template>
  <div class="dashboard-container">
    <div class="data-cards card">
      <el-row :gutter="30">
        <el-col :span="8" :offset="0">
          <el-card shadow="hover">
            <div slot="header">
              <p style="margin: 0;">
                <svg-icon icon-class="user" class-name="user-class" />
                用户统计:总计
                <router-link style="color:blue" :to="{ name: 'xsStudent' }"
                  >({{ baseData.userCount.count }})</router-link
                >
              </p>
            </div>
            <p>今日新增{{ baseData.userCountToday.count }}</p>
          </el-card>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-card shadow="hover">
            <div slot="header">
              <p style="margin:0">
                <svg-icon icon-class="form" class-name="form-class" />
                图片统计：总计
                <router-link style="color:blue" :to="{ name: 'materialImg' }"
                  >({{ baseData.imgCount.count }})</router-link
                >
              </p>
            </div>
            <p>今日新增{{ baseData.imgCountToday.count }}</p>
          </el-card>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-card shadow="hover">
            <div slot="header">
              <span>新闻统计：总计({{ baseData.newsCount.count }})</span>
            </div>
            <p>今日新增{{ baseData.newsCountToday.count }}</p>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div class="card echarts-container">
      <!-- 图标的容器 -->
      <div
        id="main"
        style="width: 600px;height:400px;backgroundColor:yellow;"
      ></div>
    </div>
  </div>
</template>

<script>
import { baseData } from "@/api/dashboard";
var echarts = require("echarts");
export default {
  name: "Dashboard",
  computed: {
    // ...mapGetters([
    //   'name'
    // ])
  },
  data() {
    return {
      baseData: {
        userCount: {
          count: 0
        },
        userCountToday: {
          count: 0
        },
        userCountByDay: [],
        imgCount: {
          count: 0
        },
        imgCountToday: {
          count: 0
        },
        imgCountByDay: [],
        newsCount: {
          count: 0
        },
        newsCountToday: {
          count: 0
        },
        newsCountByDay: []
      }
    };
  },
  methods: {
    getBaseData() {
      baseData().then(res => {
        console.log(res);
        this.baseData = res;
        this.initUserEchart();
      });
    },
    initUserEchart() {
      var xData = [];
      var yData = [];
      for (var i = 0; i < this.baseData.userCountByDay.length; i++) {
        var item = this.baseData.userCountByDay[i];
        xData.push(item.date);
        yData.push(item.count);
        console.log(xData);
      }
      this.myChart.setOption({
        title: {
          text: "用户增长趋势"
        },
        tooltip: {},
        xAxis: {
          data: xData,
          axisLabel: {
            rotate: 30
          }
        },
        yAxis: {},
        series: [
          {
            name: "数量",
            type: "bar",
            data: yData
          }
        ]
      });
    }
  },
  created() {
    this.getBaseData();
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    this.myChart = echarts.init(document.getElementById("main"));
  }
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  .card {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
